import { Fragment } from 'react';

import Banner2Mobile from '@/pagesComponents/AboutFeed/images/banner-happy-mobile.svg';
import Banner2 from '@/pagesComponents/AboutFeed/images/banner-happy.svg';
import Banner1Mobile from '@/pagesComponents/AboutFeed/images/banner-ill-mobile.svg';
import Banner1 from '@/pagesComponents/AboutFeed/images/banner-ill.svg';
import { env, innerUrls } from '@/shared/constants';
import { Button, ButtonVariants } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import { NumberedItem } from './NumberedItem';
import cs from './NumberedList.module.scss';

const list = [
  {
    id: 1,
    body: (
      <p>
        Можно предлагать пюре или кусочки, но во втором случае позаботьтесь о безопасной подаче продуктов! О том, как не
        допустить удушья у ребенка в нашем гайде{' '}
        <Button href={innerUrls.course(env.courses.gagging)} link target="_self" variant={ButtonVariants.Link}>
          «Рвотные позывы и удушье у&nbsp;детей»
        </Button>
        .
      </p>
    ),
  },
  {
    id: 2,
    body: (
      <p>
        Вводите новые продукты по одному — например, сначала только брокколи, потом только кабачок, не&nbsp;смешивая.
        Делать микс можно, когда все овощи, мясо или фрукты для него благополучно введены в рацион ребенка сами по себе.
      </p>
    ),
  },
  {
    id: 3,
    body: <p>Ввод нового продукта продолжается до 7 дней, чтобы возможно было вовремя заметить проявления аллергии.</p>,
  },
  {
    id: 4,
    body: <p>Предлагать новый продукт нужно в первой половине дня.</p>,
  },
  {
    id: 5,
    body: (
      <p>
        Объем впервые предложенного продукта должен составлять всего несколько грамм — половина чайной ложки или даже
        меньше. Можно увеличивать его понемногу каждый день, доводя до дневной нормы 100–150 грамм. Главное — следить за
        признаками аллергии или атопического дерматита, чтобы вовремя отреагировать и исключить продукт.
      </p>
    ),
  },
  {
    id: 6,
    body: (
      <p>
        Если продукт не понравился ребенку сразу, не стоит забрасывать попытки! Считается, что ребенок распробует новый
        вкус лишь с 15–20 попытки, это нормально.
      </p>
    ),
  },
  {
    id: 7,
    body: (
      <p>
        Нельзя заставлять ребенка есть через силу. В будущем это может вызвать расстройства приема пищи, нарушить
        формирование пищевых привычек. Прием пищи должен ассоциироваться у ребенка с удовольствием, радостью и новыми
        эмоциями.
      </p>
    ),
  },
  {
    id: 8,
    body: (
      <p>
        Важно позволять ребенку самому брать ложку, трогать руками продукты, даже пачкаться! Все это процесс познания
        мира. Чем больше будет у малыша возможностей проявить свою самостоятельность, тем быстрее он научится
        координировать свои движения: пинцетный захват кусочков, попадание в рот, удержание ложки.
      </p>
    ),
  },
  {
    id: 9,
    body: (
      <p>
        Вместе с началом прикорма стоит предлагать ребенку воду, так как теперь поступающая пища более плотная. Особых
        рекомендаций по объему воды нет, лучше ориентироваться на желание малыша.
      </p>
    ),
  },
];

export const NumberedList2 = () => (
  <div className={cs.list}>
    <p className={cs.text}>
      Традиционно сложилось, что начинать прикорм рекомендуют с овощей или каш. Но, как мы писали ранее,
      не&nbsp;существует какой-то строгой последовательности.{' '}
      <strong className={cs.strong}>Куда важнее сам процесс введения пищи.</strong>
    </p>
    <ol className={cs.ol}>
      {list.map(({ id, body }) => (
        <Fragment key={id}>
          <NumberedItem className={cs.item} color="#F857B4" number={id}>
            {body}
          </NumberedItem>

          {id === 3 && (
            <li className={cn(cs.banner, cs.left)}>
              <Image alt="banner" className={cs.desktop} fill src={Banner1} />
              <Image alt="banner" className={cs.mobile} fill src={Banner1Mobile} />
            </li>
          )}
          {id === 7 && (
            <li className={cs.banner}>
              <Image alt="banner" className={cs.desktop} fill src={Banner2} />
              <Image alt="banner" className={cs.mobile} fill src={Banner2Mobile} />
            </li>
          )}
        </Fragment>
      ))}
    </ol>
  </div>
);
